<template>
	<view class="product-detail">
		<EmpireNavigate title="商品详情"></EmpireNavigate>
		<view>
			<uni-swiper-dot mode="nav" field="content" :info="swiperRanges" :current="currentSwiperKey">
				<swiper class="swiper-product" :autoplay="true" :current="currentSwiperKey" @change="handleSwiperChange">
					<swiper-item v-for="(item, key) in swiperRanges" :key="key">
						<image class="swiper-image" :src="item.url"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="box-padding">
				<view class="empire-mall__flex-between product-detail__label">
					<text class="empire-mall__price">￥599</text>
					<text class="fontSize-small">月销 1221</text>
				</view>
				<text class="empire-title">JUPTTEE智能健身动感单车蓝牙互联轻运动家庭版</text>
				<view class="product-detail__selector">
					<view class="product-detail__selector-label">
						<text class="selector-text">已选</text>
						<view class="selector-picker__flex" @click="handleSpecChange">
							<view class="empire-mall__text-more">
								<text>{{ sizeSpec }}</text>
							</view>
							<uni-icons class="selector-picker__icon" type="right" size="14"></uni-icons>
						</view>
					</view>
					<view class="product-detail__selector-label box-top__border">
						<text class="selector-text">地址</text>
						<view class="selector-picker__flex" @click="handleRegionChange">
							<view class="address-text empire-mall__text-more">
								<text>{{ address }}</text>
							</view>
							<uni-icons class="selector-picker__icon" type="right" size="14"></uni-icons>
						</view>
					</view>
					<view class="product-detail__selector-label box-top__border">
						<text class="selector-text">保障</text>
						<text class="selector-picker">七天无理由退货·急速退款</text>
					</view>
				</view>
			</view>
			<view class="empire-goods__nav">
				<uni-goods-nav
					:fill="true"
					:options="options"
					:button-group="buttonGroup"
					@buttonClick="handleButtonClick"
				></uni-goods-nav>
			</view>
		</view>
		<SpecPupop
			v-model="showSizePupop"
			v-model:current="sizePupopCurrent"
			:list="sizePupopList"
			:button-text="buttonText"
			@success="handleSuccess"
		/>
		<AddressPupop v-model="showPupop" @change="handleAddressChange"></AddressPupop>
		<EmpirePrompt v-model="showPrompt" message="加入购物车成功"></EmpirePrompt>
	</view>
</template>

<script setup>
import EmpireNavigate from '@/components/empire-navigate.vue';
import AddressPupop from './address-pupop.vue';
import SpecPupop from './spec-pupop.vue';
import EmpirePrompt from '@/components/empire-prompt.vue';
import { inject, ref, toRefs, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useAppStore } from '@/store/store.js';
import { product as api } from '@/api/api.js';

const _ = inject('lodash');
const store = useAppStore();
const { shopping, address: addressSelections } = toRefs(store);
const currentSwiperKey = ref(0);
const swiperRanges = ref([]);
const options = ref([
	{ text: '客服', icon: 'chat' },
	{ text: '购物车', icon: 'cart', info: shopping.value.length }
]);
const buttonGroup = ref([
	{
		text: '加入购物车',
		backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
		color: '#fff'
	},
	{
		text: '立即购买',
		backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
		color: '#fff'
	}
]);
const productInfo = ref();
const productId = ref();
const buttonText = ref();

const address = ref();
const showPupop = ref(false);

const sizeSpec = ref();
const showSizePupop = ref(false);
const sizePupopCurrent = ref();
const sizePupopList = ref([]);

const showPrompt = ref(false);
onLoad((options) => {
	const { id } = options;
	productId.value = id || '123';
});
onMounted(() => {
	const defaultAddress = addressSelections.value.find((item) => item.checked);
	address.value = defaultAddress?.address;
	init();
});
function init() {
	api.getProductInfo({ id: productId.value }).then(({ data: result }) => {
		const { success, data } = result || {};
		if (success) {
			productInfo.value = data;
			const { serial, profiles, specs = [] } = data;
			swiperRanges.value = profiles;
			sizePupopCurrent.value = serial;
			sizePupopList.value = specs;
			sizeSpec.value = specs.find((item) => item.serial === serial)?.spec;
		}
	});
}
function handleSpecChange() {
	showSizePupop.value = true;
	buttonText.value = '';
}
function handleAddressChange(value) {
	address.value = value;
}
function handleRegionChange() {
	showPupop.value = true;
}
function handleSwiperChange(event) {
	currentSwiperKey.value = event.detail.current;
}

function handleRouteIntercept() {
	if (!address.value) {
	}
}
function handleButtonClick({ content }) {
	buttonText.value = content.text;
	showSizePupop.value = true;
	const { specs } = productInfo.value;
	sizePupopList.value = specs;
}

function handleSuccess() {
	showPrompt.value = true;
	options.value = [
		{ text: '客服', icon: 'chat' },
		{ text: '购物车', icon: 'cart', info: shopping.value.length }
	];
}
</script>

<style lang="scss" scoped>
.swiper-product {
	width: 750rpx;
	height: 750rpx;
}
.swiper-image {
	width: 100%;
	height: 100%;
	border-radius: 32rpx;
}
.product-detail__label {
	height: 56rpx;
	line-height: 56rpx;
}
.empire-title {
	height: 32rpx;
	line-height: 32rpx;
	padding: 24rpx 0;
	text-indent: 10rpx;
	font-size: 32rpx;
}
.product-detail__selector {
	background-color: #fff;
	border-radius: 24rpx;
	margin: 12rpx 0;
	&-label {
		display: flex;
		align-items: center;
		margin: 0 34rpx;
		font-size: 24rpx;
	}
}

.selector-text {
	width: 92rpx;
	height: 92rpx;
	line-height: 92rpx;
	opacity: 0.6;
}

.selector-picker__flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 92rpx);
	height: 92rpx;
	line-height: 92rpx;
	font-size: 28rpx;
}

.empire-goods__nav {
	position: fixed;
	width: 100%;
	bottom: 20px;
}
</style>
